<template>
  <div class="pt-11 h-[575px] relative">
    <HomeSwiper :banner="data.banner" />
    <div class="live">
      <h1>乐享生活100+</h1>
      <div class="live-list">
        <div class="live-item" v-for="index in 10" v-if="data.sports.length">
          <div class="live-btn">
            <img :src="data.sports[index].menuThumbnail" :alt="data.sports[index].displayName">
            <h3>{{data.sports[index].displayName}}</h3>
          </div>
        </div>
      </div>
      <a-button type="primary" size="large" @click="router.push('/product')">立即享受生活</a-button>
    </div>
  </div>
</template>

<script setup>
import HomeSwiper from "./HomeSwiper.vue";
import { GETHOMEPAGE } from "@/api";
import { reactive } from "@vue/reactivity";
import { useRouter } from "vue-router";

const res = await GETHOMEPAGE();
const data = reactive({banner: res.banner, sports: res.sports});
const router = useRouter();
</script>

<style lang="scss">
.live {
  @apply w-[1200px] my-40 mx-auto flex flex-col items-center;
  h1 {
    @apply text-3xl mb-5;
  }
  .live-list {
    @apply flex flex-wrap;
    .live-item {
      @apply w-60;
      .live-btn {
        @apply flex h-[73px] w-[200px] bg-white rounded-tr-lg mb-8 rounded-b-3xl rounded-l-lg shadow-xl items-center justify-center relative; 
        img {
          @apply absolute w-20 h-20 -left-4 -top-4;
          h3 {
            @apply font-black text-xl;
          }
        }
      }
    }
  }
}
</style>